<template>
  <div>
    <div class="head">
      <div class="layui-row">
        <div class="layui-col-md4" style="font-size: 18px; line-height: 30px; margin-bottom: 10px;">
          总公司
        </div>
        <div class="layui-col-md4">
          <div style="text-align: center;">
            楼栋：
            <select class="layui-input" style="display: inline-block; width: 250px;" v-model="buildingId" @change="initStoreyList">
              <option v-for="item in buildingList" :label="item.buildingname" :value="item.id"></option>
            </select>
          </div>
        </div>
        <div class="layui-col-md4 text-right">
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" @click="initStoreyList">查看全部</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" @click="searchStoreyByState0">查看空闲</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" @click="searchStoreyByState1">查看入住</button>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md6">
          <div style="line-height: 30px; color: rgb(170, 170, 170);">联系电话：40082088</div>
          <div style="line-height: 30px; color: rgb(170, 170, 170);">地址：由由燕桥大厦</div>
        </div>
        <div class="layui-col-md6 detail">
          <div class="layui-row">
            <div class="layui-col-md4">
              <div class="text">总床位数</div>
              <div class="value">{{allBedCount}}</div>
            </div>
            <div class="layui-col-md4">
              <div class="text">当前使用中</div>
              <div class="value">{{useCount}}</div>
            </div>
            <div class="layui-col-md4">
              <div class="text">空闲床位数</div>
              <div class="value">{{freeCount}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bed-list">
      <div class="layui-fluid">
        <table class="layui-table" style="width: 100%;" v-model="storeyList">
          <tbody>
          <tr style="background: rgb(255, 255, 255);" v-for="storey in storeyList">
            <td style="word-break: keep-all; white-space: nowrap; font-weight: bold;text-align: center;width: 50px">{{ storey.storeyname }}</td>
            <td style="padding: 5px 0px 0px 5px;">
              <div class="room-container" style="background: rgb(238, 238, 238);height: auto;text-align: center;width: 200px" v-for="room in storey.roomList">
                <div class="name" style="text-align: center; line-height: 30px">{{ room.roomname }}</div>
                <div v-for="bed in room.bedList">
                  <div class="bed free" v-if="bed.state == 0" style="margin-bottom: 2px;text-align: center">
                    <div class="layui-row" >
                      <div class=" text name text-center" >{{ bed.bedname }}</div>
                    </div>
                    <div class="layui-row">
                      <div class=" text">空闲</div>
                    </div>
                  </div>
                  <div class="bed man" v-else-if="bed.state == 1" style="margin-bottom: 2px;text-align: center" @click="searchOlder(bed.id)">
                    <div class="layui-row">
                      <div class=" text name">{{ bed.bedname }}</div>
                    </div>
                    <div class="layui-row">
                      <div class=" text">{{bed.oldname}}</div>
                      <div class="text ">入住</div>
                    </div>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!--    查看长者详细信息-->
      <el-dialog title="长者详情" :visible.sync="OlderDetailDialogVisible"
                 width="80%" @close="OlderDetailFormClose" :close-on-click-modal="false">
        <el-descriptions v-model="Older" class="margin-top"  :column="3"  border>
          <el-descriptions-item>
            <template slot="label">
              头像
            </template>
            <el-avatar :src="'http://localhost:10001/'+Older.img" v-if="Older.img != null"></el-avatar>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{Older.name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              性别
            </template>
            {{Older.sex}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              年龄
            </template>
            {{Older.age}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              身份证号
            </template>
            {{Older.idcard}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              电话
            </template>
            {{Older.tel}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              家庭地址
            </template>
            {{Older.address}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              入住日期
            </template>
            {{Older.checkdate}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              出院日期
            </template>
            {{Older.exitdate}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              在院状态
            </template>
            <el-tag v-if="Older.status == 0">退房</el-tag>
            <el-tag v-if="Older.status == 1">入住</el-tag>
            <el-tag v-if="Older.status == 2">待退房</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              紧急联系人电话
            </template>
            {{Older.emergencytel}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              身体健康情况
            </template>
            {{Older.healthy}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              综合服务费
            </template>
            {{Older.totalmoney}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              合同模板
            </template>
            <el-tag>{{Older.contract ? Older.contract.contractname : ''}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              护理级别
            </template>
            <el-tag>{{Older.care ? Older.care.level : ''}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              床位编号
            </template>
            <el-tag>{{Older.bed ? Older.bed.bedname : ''}}</el-tag>

          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              标签
            </template>
            <el-tag>{{Older.label ? Older.label.labeltype : ''}}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
<!--        <el-tabs v-model="activeName" @tab-click="handleClick" style="text-align: center">
          <el-tab-pane label="长者动态" name="first">长者动态</el-tab-pane>
          <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
          <el-tab-pane label="一卡通流水" name="third">一卡通流水</el-tab-pane>
          <el-tab-pane label="资料信息" name="fourth">资料信息</el-tab-pane>
        </el-tabs>-->
      </el-dialog>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buildingId:1,
      buildingList:[],
      storeyList: [
        {
          id:1,
          storeyname:'1楼',
          roomList:[
            {
              id:1,
              roomname:'A101',
              bedList:[
                {
                  id:1,
                  bedname:'床位1',
                  state:1,
                },
                {
                  id:2,
                  bedname:'床位2',
                  state:0,
                },
                {
                  id:3,
                  bedname:'床位3',
                  state:0,
                },
              ]
            },
            {
              id:2,
              roomname:'A102',
              bedList:[
                {
                  id:1,
                  bedname:'床位1',
                  state:0,
                },
                {
                  id:2,
                  bedname:'床位2',
                  state:1,
                },
                {
                  id:3,
                  bedname:'床位3',
                  state:1,
                },
              ]
            }
          ],
        },
        {
          id: 2,
          storeyname: '3楼',
          roomList: [
            {
              id: 1,
              roomname: 'B101',
              bedList: [
                {
                  id: 1,
                  bedname: '床位1',
                  state:1,
                },
                {
                  id: 2,
                  bedname: '床位2',
                  state:1,
                },
                {
                  id: 3,
                  bedname: '床位3',
                  state:0,
                },
              ]
            },
            {
              id: 2,
              roomname: 'B102',
              bedList: [
                {
                  id: 1,
                  bedname: '床位1',
                  state:1,
                },
                {
                  id: 2,
                  bedname: '床位2',
                  state:0,
                },
                {
                  id: 3,
                  bedname: '床位3',
                  state:1,
                },
              ]
            }
          ]
        }
      ],
      allBedCount:0,
      useCount:0,
      freeCount:0,
      OlderDetailDialogVisible:false,
      Older:{
        contract:{},
        care:{},
        bed:{},
        label:{}
      },
    };
  },
  methods:{
    //查询入住老者详细信息
    searchOlder(bid){
      this.OlderDetailDialogVisible = true;
      let url = '/bed/searchOlderByBid?bedId='+bid;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.Older = res.data.data;
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    OlderDetailFormClose(){
      this.OlderDetailDialogVisible = false;
    },

    //查看床位使用情况
    initBedAccount(){
      let url = "/bed/selectBedAccount";
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.allBedCount = res.data.data.allBedAccount;
          this.useCount = res.data.data.useAccount;
          this.freeCount = res.data.data.freeAccount;
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },

    //查看空闲床位信息
    searchStoreyByState0(){
      let url = '/bed/searchStoreyByState0?buildingId='+this.buildingId;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            message: res.data.msg,
            type:'success',
            duration:1000
          })
          this.storeyList = res.data.data;
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },

    //查看入住床位信息
    searchStoreyByState1(){
      let url = '/bed/searchStoreyByState1?buildingId='+this.buildingId;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            message: res.data.msg,
            type:'success',
            duration:1000
          })
          this.storeyList = res.data.data;
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },


    initBuilding(){
      let url = '/bed/selectAllBuilding';
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.buildingList = res.data.data;
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    },
    initStoreyList(){
      let url = 'bed/selectBedDyaVoByBuid?buildingId='+this.buildingId;
      this.$axios.get(url).then((res)=>{
        if(res.data.code == 200){
          this.$message({
            message: res.data.msg,
            type:'success',
            duration:1000
          })
          this.storeyList = res.data.data;
          console.log(this.storeyList);
        }else{
          this.$message({
            message: res.data.msg,
            type:'error',
            duration:1000
          })
        }
      })
    }
  },
  created() {
    this.initBuilding();
    this.initStoreyList();
    this.initBedAccount();
  }
}
</script>

<style scoped>
.head {
  background: #fff;
  padding: 10px 20px;
  margin-top: 10px;
}

.detail .layui-col-md4 {
  text-align: center;
  border-right: 1px solid #eee;
}

.detail .layui-col-md4:last-child {
  border-right: none;
}

.detail .text {
  color: #aaa;
  font-size: 12px;
}

.detail .value {
  font-size: 24px;
  line-height: 35px;
}

.bed-list {
  margin-top: 10px;
}

.bed-list .layui-card-body {
  margin-top: 10px;
}

.bed-list .man {
  background-color: #1E9FFF;
  color: #fff;
  cursor: pointer;
}

.bed-list .woman {
  background-color: #FF5722;
  color: #fff;
  cursor: pointer;
}

.bed-list .free {
  background-color: #5FB878;
  color: #fff;
}

.bed-list .text, .bed-list .text span {
  font-size: 12px;
  word-break: keep-all;
  white-space: nowrap
}

.bed-item {
  position: relative;
}

.bed-box {
  position: absolute;
  right: 0px;
  top: -52px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 5px;
  border-radius: 2px;
}

.room-container {
  width: 170px;
  height: 175px;
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
}

.room-container .bed {
  border-bottom: 1px solid #eee;
  padding: 2px 5px;
}

.room-container .name {
  font-weight: bold;
}

.room-container .bed:last-child {
  border-bottom: none;
}

.head-photo {
  height: 140px;
  width: 113px;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}
</style>